<template>
  <editor v-model="content" :id="id" :init="editorConfig"> </editor>
</template>
<script lang="ts" setup>
import { ref, onMounted, computed, watch, nextTick } from "vue";
import request from "@/request";
import tinymce from "tinymce";
import Editor from "@tinymce/tinymce-vue";

import "tinymce/themes/silver/theme.min.js";
import "tinymce/icons/default/icons";
import "tinymce/plugins/image";
import "tinymce/plugins/link";
import "tinymce/plugins/code";
import "tinymce/plugins/codesample";
import "tinymce/plugins/table";
import "tinymce/plugins/lists";
import "tinymce/plugins/wordcount";
import "tinymce/plugins/media";
import "tinymce/plugins/emoticons";
import "tinymce/plugins/fullscreen";
import "tinymce/plugins/preview";
import "tinymce/plugins/pagebreak";
import "tinymce/plugins/insertdatetime";
import "tinymce/plugins/hr";
import "tinymce/plugins/paste";
import "tinymce/plugins/print";
import ResultEnum from "@/config/ResultEnum";
import { message } from "ant-design-vue";

interface PropsConfig {
  value: string;
  id?: string;
}

const props = withDefaults(defineProps<PropsConfig>(), {
  value: "",
  id: "tinymce",
});

const emit = defineEmits(["update:value"]);

const content = ref(props.value);

const editorConfig = {
  selector: "#" + props.id,
  language_url: "/tinymce/langs/zh_CN.js",
  language: "zh_CN",
  skin_url: "/tinymce/skins/ui/oxide",
  height: 400,
  branding: true,
  plugins:
    "link lists image codesample code table wordcount media table fullscreen preview pagebreak insertdatetime hr paste", // 插件
  toolbar:
    "codesample image bold italic underline alignleft aligncenter alignright alignjustify | forecolor backcolor | fontselect | fontsizeselect | formatselect |  bullist numlist | outdent indent blockquote | removeformat| undo redo | link unlink media insertdatetime table  hr pagebreak | fullscreen preview | strikethrough", // 工具条
  font_formats:
    "Arial=arial,helvetica,sans-serif; 宋体=SimSun;  微软雅黑=Microsoft Yahei; Impact=impact,chicago;", // 字体
  fontsize_formats: "11px 12px 14px 16px 18px 24px 36px 48px 64px 72px", // 文字大小
  paste_data_images: true,
  codesample_languages: [
    { text: "HTML/XML", value: "markup" },
    { text: "JavaScript", value: "javascript" },
    { text: "CSS", value: "css" },
    { text: "Java", value: "java" },
    { text: "C++", value: "cpp" },
  ],
  // 图片上传回调
  images_upload_handler: (blobInfo: any, success: Function) => {
    const file = blobInfo.blob();
    console.log(file);
    // 拿到file文件后在这里进行你自己的上传接口，用过success(url)把图片地址插入到编辑器
    let fileNew = [];
    let fileParam: any = {};
    let param = {};
    //整理上传参数
    fileParam.content = Math.random() * 20 + file.name;
    fileParam.file = file;
    fileParam.message = "";
    fileParam.status = "";
    fileNew.push(fileParam);

    // 在这里进行一系列的校验
    let formData = new FormData();
    formData.append("file", file);

    request({
      url: "/open/img/upload?from=tinymce",
      method: "post",
      data: formData,
      headers: {
        "Content-Type": "multipart/form-data",
      },
    }).then((res: any) => {
      if (res.code == ResultEnum.SUCCESS_CODE) {
        success(res.result.location);
      } else {
        message.error("图片上传失败");
      }
    });
  },
};

const setContent = (res: string) => {
  content.value = res;
};

watch(
  () => props.value,
  (value: string) => {
    content.value = value;
  }
);

watch(
  () => content.value,
  (value: string) => {
    emit("update:value", value);
  }
);

onMounted(() => {
  tinymce.init(editorConfig);
  content.value = props.value;
});

defineExpose({
  setContent,
});
</script>

<style lang="less" scoped></style>
